<%@page contentType="text/html; charset=utf-8"%>
<%@include file="/WEB-INF/views/common/taglibs.jspf" %>


<title>系统资源表单</title>

<div style="padding:12px;">
	<div class="row">
		<div class="col-xs-12">
			<!-- PAGE CONTENT BEGINS -->
				
				<div class="row">
					<div class="col-xs-3">
						<ul id="tree1" class="ztree list" style="display: none;"></ul>
					</div>
					
					<div class="col-xs-9">
						<form class="form-horizontal" id="form" method="get">
							<input type="hidden" value="${id}" name="id">
							<input type="text" name="parentId" id="parentId">
							<input type="text" name="parentIds" id="parentIds">
							<input type="text" name="parentIdentity" id="parentIdentity">
							
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="username">父节点:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input type="text" id="parentName" class="col-xs-12 col-sm-5" readonly />
										<button class="btn btn-white btn-warning" type="button" onclick="removeNode();" style="border-left:none;"><i class="ace-icon fa fa-times"  style="font-size:18px;margin:0px;"></i></button>
									</div>
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="name">名　称:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input type="text" name="name" id="name" class="col-xs-12 col-sm-5" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="identity">标　示:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input type="text" name="identity" id="identity" class="col-xs-12 col-sm-5" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="href">链接地址:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<input type="text" name="href" id="href" class="col-xs-12 col-sm-8" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="weight">排　序:</label>
								<div class="col-xs-12 col-sm-9">
									<input type="text" class="input-mini" id="spinner3" />
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="type">类型:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix" style="height:33px;line-height: 33px;">
										<label class="line-height-1 blue">
											<input name="type" value="menu" type="radio" checked="checked" class="ace" />
											<span class="lbl"> 菜单</span>
										</label>
										<label class="line-height-1 blue">
											<input name="type" value="oper" type="radio" class="ace" />
											<span class="lbl"> 操作</span>
										</label>
									</div>
								</div>
							</div>
							<div class="form-group" id="crud">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="type">基本操作:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix" style="height:33px;line-height: 33px;">
										<label>
											<input type="checkbox" class="ace" id="selAll">
											<span class="lbl"> 全选</span>
										</label>
										<label>
											<input type="checkbox" value="create-新增" class="ace" name="opers">
											<span class="lbl"> 新增</span>
										</label>
										<label>
											<input type="checkbox" value="delete-删除" class="ace" name="opers">
											<span class="lbl"> 删除</span>
										</label>
										<label>
											<input type="checkbox" value="update-修改" class="ace" name="opers">
											<span class="lbl"> 修改</span>
										</label>
										<label>
											<input type="checkbox" value="read-查询" class="ace" name="opers">
											<span class="lbl"> 查询</span>
										</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="type">是否展开:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix" style="height:33px;line-height: 33px;">
										<label class="line-height-1 blue">
											<input name="expanded" value="true" type="radio" checked="checked" class="ace" />
											<span class="lbl"> 展开</span>
										</label>
										<label class="line-height-1 blue">
											<input name="expanded" value="false" type="radio" class="ace" />
											<span class="lbl"> 折叠</span>
										</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="admin">是否显示:</label>
								<div class="col-xs-12 col-sm-9">
									<div class="clearfix" style="height:33px;line-height: 33px;">
										<label class="line-height-1 blue">
											<input name="show" checked="checked" value="true" type="radio" class="ace" />
											<span class="lbl"> 显示</span>
										</label>
										<label class="line-height-1 blue">
											<input name="show" value="false" type="radio" class="ace" />
											<span class="lbl"> 隐藏</span>
										</label>
									</div>
								</div>
							</div>
							
						</form>
					</div>
				</div>
	
			<!-- PAGE CONTENT ENDS -->
		</div><!-- /.col -->
	</div><!-- /.row -->
</div>
<script type="text/javascript">
var tree, tmp=[], parentIds=[], parentIdentity=[] ;
var scripts = [null, 
               "${ctx}/static/admin/ace/js/jquery.validate.js",
               "${ctx}/static/js/localization/messages_zh.js",
               "${ctx}/static/admin/ace/js/ace/elements.spinner.js",
               "${ctx}/static/admin/ace/js/fuelux/fuelux.spinner.js",
               null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	jQuery(function($) {
		
		tree = $("#tree1");
		$.get("${ctx}/admin/sys/resource/list", function(result) { 
			$.fn.zTree.init(tree, {
				data: {
					simpleData: {
						enable:true,
						idKey: "id",
						pIdKey: "parentId",
					}
				},
				check: {
					enable: true,
					chkStyle: "radio",
					radioType: "all"
				},
				callback: {
					onClick: onClick,
					onCheck: onCheck
				}
			}, result).expandAll(true);
			window.setTimeout(function() {
				tree.css({
					"position": "fixed",
					"height": $(".layui-layer-content").height()+"px"
				}).slideDown();
			}, 300);
		},"JSON") ;
		
		
		if(undefined != "${id}" && "${id}" != "") {
			$.get("${ctx}/admin/sys/resource/get/${id}", function(result){
				$("#form").autofill(result);
				
				if("menu" == result.type) {
					if(undefined != result.opers && result.opers.length > 0) {
						var sp = result.opers.split(",") ;
						$.each(sp, function(i,p) {
							$("input[type=checkbox][name=opers][value="+sp[i]+"]").prop("checked", true);
						});
					}
				} else {
					$("#crud").hide() ;
					$("input[type=radio][name=type][value=menu]").prop("disabled", true);
					$("input[type=checkbox][name=opers]").prop("checked", false);
				}
				
				window.setTimeout(function() {
					if(undefined != result && undefined != result.parentId) {
						var treeObj = $.fn.zTree.getZTreeObj("tree1");
						var node = treeObj.getNodeByParam("id", result.parentId, null);
						treeObj.checkNode(node, true, false);
						treeObj.selectNode(node);
						$("#parentId").val(node.id) ;
						$("#parentName").val(node.name) ;
						
						//设置parentIds父节点路径
						getParentIds(treeObj, node) ; 	
						for(var i=tmp.length-1; i>-1; i--) {
							parentIds.push(tmp[i].id) ;
							parentIdentity.push(tmp[i].identity) ;
						}
						$("#parentIds").val(parentIds.join("/")) ;
						$("#parentIdentity").val(parentIdentity.join(":")) ;
						
					}
				}, 100);
				
			});
		}
		
		$("#selAll").on("click", function() {
			if($(this).prop("checked") == true) {
				$("input[type=checkbox][name=opers]").prop("checked", true);
			} else {
				$("input[type=checkbox][name=opers]").prop("checked", false);
			}
		});
		$("input[type=radio][name=type]").click(function() {
			if("menu" === this.value) {
				$("#crud").show() ;
			} else {
				$("#crud").hide() ;
				$("input[type=checkbox][name=opers]").prop("checked", false);
				$("#selAll").prop("checked", false) ;
			}
		});
		
		
		$('#form').validate({
			errorElement: 'div',
			errorClass: 'help-block',
			rules: {
				name: {
					required: true
				}
			},
			highlight: function (e) {
				$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
			},
			success: function (e) {
				$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
				$(e).remove();
			},
			errorPlacement: function (error, element) {
				if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
					var controls = element.closest('div[class*="col-"]');
					if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
					else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
				}
				else if(element.is('.select2')) {
					error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
				}
				else if(element.is('.chosen-select')) {
					error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
				}
				else error.insertAfter(element.parent());
			}
		});
		
		
		$('#spinner3').ace_spinner({
			value:0,min:0,max:1000,step:1, on_sides: true, icon_up:'ace-icon fa fa-plus smaller-75', 
			icon_down:'ace-icon fa fa-minus smaller-75', btn_up_class:'btn-success' , btn_down_class:'btn-danger'
		}).css("height","33px").siblings("div").children("button").css("height","33px");
		
	});
});


//获取父节点
function getParentIds(treeObj, node) {
	tmp.push(node);
	var p = node.getParentNode() ;
	if(null != p) {
		getParentIds(treeObj, p) ;
	}
}

function removeNode() {
	var treeObj = $.fn.zTree.getZTreeObj("tree1");
	var nodes = treeObj.getCheckedNodes(true);
	treeObj.checkNode(nodes[0], false, false);
	treeObj.cancelSelectedNode(nodes[0]);
	$("#parentId").val("") ;
	$("#parentName").val("") ;
}

function onClick(e, treeId, treeNode) {
	if(treeNode.id == "${id}") {
		alert("不可选中自己作为父节点") ;
		return ;
	}
	var zTree = $.fn.zTree.getZTreeObj("tree1");
	zTree.checkNode(treeNode, !treeNode.checked, null, true);
	return false;
}

function onCheck(e, treeId, treeNode) {
	if(treeNode.id == "${id}") {
		alert("不可选中自己作为父节点") ;
		return ;
	}
	var zTree = $.fn.zTree.getZTreeObj("tree1"),
	nodes = zTree.getCheckedNodes(true), id = "", name = "";
	
	for (var i=0, l=nodes.length; i<l; i++) {
		id += nodes[i].id + ",";
		name += nodes[i].name + ",";
	}
	if (id.length > 0 ) id = id.substring(0, id.length-1);
	if (name.length > 0 ) name = name.substring(0, name.length-1);
	$("#parentId").val(id) ;
	$("#parentName").val(name) ;
	
	if("" != id) {
		parentIds=[]; parentIdentity=[]; tmp=[];
		getParentIds(zTree, treeNode) ;
		for(var i=tmp.length-1; i>-1; i--) {
			parentIds.push(tmp[i].id) ;
			parentIdentity.push(tmp[i].identity) ;
		}
		$("#parentIds").val(parentIds.join("/")) ;
		$("#parentIdentity").val(parentIdentity.join(":")) ;
	} else {
		$("#parentIds").val("") ;
		$("#parentIdentity").val("") ;
	}
	
}

</script>
